<template>
  <div>
    <van-nav-bar right-text="确认订单" left-arrow @click-left="onClickLeft" />
    <div class="qq">
      <van-contact-card
        type="edit"
        :tel="tel"
        :name="name"
        @click="onEdit"
        to="/dizhi"
      />
    </div>
    <div class="ee">
      <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
      </van-card>
    </div>
    <div class="rr">
      <div class="tt">
        <div>商品总价</div>
        <div>￥88</div>
      </div>
      <div class="tt">
        <div>运费</div>
        <div>包邮</div>
      </div>
    </div>
    <div>
      <!-- 优惠券单元格 -->
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <van-popup
        v-model:show="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <div>
      <van-submit-bar
        :price="3050"
        button-text="提交订单"
        to="/shouyin"
        @submit="$router.push(`/jiezhang`)"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { ref } from "vue";

export default {
  setup() {
    const tel = ref("13000000000");
    const name = ref("张三");
    const onEdit = () => Toast("edit");

    const onClickLeft = () => history.back();
    const coupon = {
      available: 1,
      condition: "无门槛\n最多优惠12元",
      reason: "",
      value: 150,
      name: "优惠券名称",
      startAt: 1489104000,
      endAt: 1514592000,
      valueDesc: "1.5",
      unitDesc: "元",
    };

    const coupons = ref([coupon]);
    const showList = ref(false);
    const chosenCoupon = ref(-1);

    const onChange = (index) => {
      showList.value = false;
      chosenCoupon.value = index;
    };
    const onExchange = (code) => {
      coupons.value.push(coupon);
    };

    return {
      coupons,
      showList,
      onChange,
      onExchange,
      chosenCoupon,
      disabledCoupons: [coupon],
      onClickLeft,
      tel,
      name,
      onEdit,
    };
  },
};
</script>

<style>
.van-tabs__line {
  background-color: red;
}
.van-coupon__corner .van-checkbox__icon--checked .van-icon {
  background-color: red;
  border: none;
}
.van-button--primary {
  background-color: red;
  color: white;
  border-color: none;
}
.van-button:before {
  background-color: red;
}
.van-button--plain.van-button--primary {
  color: red;
}
.van-coupon__head {
  color: red;
}
.van-card {
  padding: 0;
}
.rr {
  margin-top: 15px;
}
.tt {
  display: flex;
  justify-content: space-between;
  height: 50px;
  background-color: white;
  border: 0.3px solid whitesmoke;
  text-align: center;
  line-height: 50px;
  padding: 0 18px;
  font-size: 0.9rem;
}
.ee {
  margin-top: 15px;
}
html {
  height: 100%;
  background-color: whitesmoke;
}
.van-contact-card {
  margin-top: 10px;
}
.van-nav-bar__content {
  height: 60px;
  background-color: coral;
}
.van-nav-bar__left,
.van-nav-bar__right {
  font-size: 1.5rem;
}
.van-nav-bar__text {
  color: white;
}
.van-icon-arrow-left:before {
  color: white;
}
</style>